<template>
  <div class="header">
    <div @click="sss">西安西安</div>
    <ul class="aaa">
      <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
      <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="item.id" class="bbb">
        <!-- 在这里打印出boll值方便查看 -->
        {{item.name}}{{item.show}}
        <!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
        <ul v-show="item.show" class="ccc">
          <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
          <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)" :key="a.id" class="ddd">{{a}}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'register',
  data () {
    return {
      cs: 111,
      headerData: [{
        name: '导航1',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '导航2',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '导航3',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '导航4',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '导航5',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }]
    }
  },
  methods: {
    changeli: function (ind, item) {
      // 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
      this.headerData.forEach(i => {
        // 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
        if (i.show !== this.headerData[ind].show) {
          i.show = false
        }
      })
      // 取反(true或false)
      item.show = !item.show
      console.log(item.name)
    },
    doThis: function (index) {
      alert(index)
    },
    sss: function () {
      this.$router.push({
        path: '/test',
        query: {
          id: 123,
          name: 'Value',
          code: 10011
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  *{
    padding: 0;
    margin: 0;
  }
  li{
    list-style: none;
  }
  .header {
    width: 20%;
    background-color: #ff5722;
    color: #ffffff;
    ul {
      width: 100%;
      li {
        width: 100%;
        border: 1px solid #ffffff;
        cursor: pointer;
        color: #000;
        text-align: center;
        line-height: 60px;
        &:hover {
          background-color: #ff9800;
        }
        ul {
          width: 100%;
          background: yellow;
          li{
            &:hover{
              background: #c31111;
            }
          }
        }
      }
      .active {
        background-color: #ff9800;
      }
    }
  }
  /*.aaa{
    display: flex;
    justify-content: space-around;
  }
  .ccc{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }*/
</style>
